<template>
  <div class="container">
    <div class="breadcrumb">
      <div class="content-box">
        <a-breadcrumb class="tabs-content-breadcrumb" separator=">">
          <a-breadcrumb-item><a @click="goPage('/home')">首页</a></a-breadcrumb-item>
          <a-breadcrumb-item><a @click="goPage('/home')">产业服务中心</a></a-breadcrumb-item>
          <a-breadcrumb-item>金融服务</a-breadcrumb-item>
        </a-breadcrumb>
      </div>
    </div>
    <!--金融服务-->
    <div class="content-box">
      <div class="jr-content">
        <div class="jr-item" v-for="(item, index) in jrList" :key="index">
          <img :src="item.url" alt="">
          <div class="jr-item-btn">
            立即前往
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {defineComponent} from "vue";
import {useRouter} from "vue-router";

export default defineComponent({
  name: "Competence",
  setup() {
    const router = useRouter()
    const jrList = [
      {
        url: require('../../assets/img/home/cyfw-jrfw-1.png')
      },
      {
        url: require('../../assets/img/home/cyfw-jrfw-2.png')
      },
      {
        url: require('../../assets/img/home/cyfw-jrfw-3.png')
      }
    ]
    const goPage = (path) => {
      router.push({
        path,
      })
    }
    return {jrList, goPage}
  }
})
</script>

<style scoped lang="less">
.container {
  background: url("../../assets/img/nlzx-bg.png");

  .breadcrumb {
    background: #FFFFFF;
  }
  .tabs-content-breadcrumb {
    padding: 15px 0 15px;
    font-size: 18px;
  }

  .jr-content {
    padding: 40px 0;

    .jr-item {
      position: relative;
      margin-bottom: 30px;

      .jr-item-btn {
        position: absolute;
        left: 120px;
        bottom: 50px;
        width: 180px;
        height: 44px;
        line-height: 44px;
        background: rgba(255, 255, 255, 0.4);
        border-radius: 50px;
        border: 1px solid #FFFFFF;
        text-align: center;
        color: #FFFFFF;
        font-size: 18px;
        cursor: pointer;
      }
    }
  }
}


</style>
